<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/oksub.css">
    <meta charset="UTF-8">
    <title>个人中心</title>
    <style>
        .addtea-con{
            padding:0 15px 15px 15px;
            margin-bottom: 40px;
        }
        .addtea-con .top-inp{
            margin-left: 20px;
        }
        .addtea-con .from-con{
            margin: auto;
            background-color: #fdfcfc;
            padding: 10px;
            overflow: hidden;
        }
        .addtea-con .from-con .layui-form-item{
            margin:20px 0 ;
        }
        .addtea-con .not_border_left {
            border-left: none !important;
        }
        .addtea-con .layui-form-item .layui-input-block .required {
            /* color: red;  */
            color: #ffb800;
            font-size: 32px;
            float: left;
            margin-left: 5px;
            margin-top: 5px;
            position: absolute;
            right: -15px;
        }
        .addtea-con .layui-form-select dl dd.layui-this{
            background-color: #1E9FFF !important;
        }
        .addtea-con .layui-btn{
            background-color: #1E9FFF !important;
        }
        .addtea-con .layui-form-select dl{
            max-height:230px !important;
        }
        .importTeacher {
            padding: 0px 15px 20px 15px;
            margin-bottom: 30px;
        }

        .importTeacher .importTeacher-con {
            height: 60px;
            background-color: #fdfcfc;
        }

        .importTeacher .layui-table-view {
            border: none;
        }

        .importTeacher .importTeacher-con .leftbtn {
            float: left;
            margin-left: 10px;
            margin-top: 10px;
        }

        .importTeacher .importTeacher-con .rightbtn {
            float: right;
            margin-top: 10px;
            margin-right: 10px;
        }

        .importTeacher .importTeacher-con .savebtn {
            float: left;
            margin: 10px 0px 0px 20px;
        }

        .importTeacher .layui-table-body table tbody .layui-table-hover {
            background: #fffdd3 !important;
        }

        .importTeacher .layui-table-body table tbody .layui-table-click {
            background: #fdef9b !important;
        }
        .importTeacher .model{
            margin-top: 40px;
        }
        .importTeacher .model label {
            font-size: 15px;
        }
        .inputstyle{
            float: left;
            position: relative;
            border: 0px;
            background-color: #f1f3f3;
            color: #666868;
        }
    </style>
</head>
<body>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>个人信息</legend>
</fieldset>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">
            <div class="addtea-con">
                <div class="from-con">
                    <div style="width: 60%;margin: 0 auto;">
                        <form class="layui-form" style="margin-left: -90px" action="" id="formaddtea">
                            <div class="layui-row">
                                <div class="layui-col-xs6">
                                    <div class="layui-form-item" style="margin-right: 15%">
                                        <label class="layui-form-label">账号名&#12288;</label>
                                        <div class="layui-input-block">
                                            <input id="policeId" class="layui-input inputstyle" type="text"  name="policeId" readonly unselectable="on">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="layui-form-item"style="margin-left: 15%">
                                        <label class="layui-form-label">姓&#12288;&#12288;名</label>
                                        <div class="layui-input-block">
                                            <input id="fullName" class="layui-input inputstyle" type="text"  name="fullName" readonly unselectable="on">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-xs6">
                                    <div class="layui-form-item" style="margin-right: 15%">
                                        <label class="layui-form-label">电&#12288;&#12288;话</label>
                                        <div class="layui-input-block">
                                            <input id="phone" class="layui-input inputstyle" type="tel"
                                                   name="phone" readonly="readonly" >
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="layui-form-item" style="margin-left: 15%">
                                        <label class="layui-form-label">性&#12288;&#12288;别</label>
                                        <div class="layui-input-block" name="sex">
                                            <input id="agender" class="layui-input inputstyle" type="text" name="agender" readonly unselectable="on">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div style="width: 100%; height: 100px;line-height: 100px;text-align: right">
                                <a id="hide" class="layui-btn layui-btn-primary" style="color: white">编辑</a>
                                <button id="hide1" type="button" class="layui-btn" lay-submit lay-filter="submit">保存</button>
                                <button id="hide2"  class="layui-btn">取消</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

</body>
<script src="../../lib/layui/layui.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/application.js"></script>
<script type="text/javascript">
    $("#tel").prop("readonly", "true");
    $("#hide1").hide();
    $("#hide2").hide();

    $(document).ready(function(){
        $("#hide").click(function(){
            $("#hide").hide();
            $("#hide1").show();
            $("#hide2").show();
            $("#phone").removeProp("readonly");
            $("#phone").css("background","#7bb6e3");
            $("#phone").css("color","#252526");
        });



        $("#hide2").click(function(){
            $("#hide").show();
            $("#hide1").hide();
            $("#hide2").hide();
            $("#phone").removeProp("readonly");
        });
    });


    layui.use(['form'], function () {
        var $ = layui.jquery
        var form = layui.form

        var policeInfo = JSON.parse(window.sessionStorage.getItem("police"));

        $("#policeId").val(policeInfo.policeId);//用户id
        $("#fullName").val(policeInfo.fullName);//用户名
        var agender = policeInfo.agender;//性别
        if (agender == 0) {
            $("#agender").val("女");
        } else {
            $("#agender").val("男");
        }
        $("#phone").val(policeInfo.phone);//电话号码
        $("#roleName").val(policeInfo.roleName);//角色
        $("#departmentName").val(policeInfo.departmentName);//部门


        form.on('submit(submit)', function(data){
            layer.confirm('确定修改吗?', {icon: 3, title: '提示'}, function (index) {
                showloading(true)
                var agender=0;
                if($("#agender").val()=="女"){
                    agender=1
                }
                $.ajax({
                    type: "post",
                    // url: mainUri + "/user/updateInfo",
                    data: {
                        "policeId":$("#policeId").val(),
                        "fullName":$("#fullName").val(),
                        "agender": agender,
                        "phone": $("#phone").val(),
                    },    //这个是传给后台的值
                    success: function (data) {
                        showloading(false)
                        if (data.code == 0) {    //这个是从后台取回来的状态值
                            layer.msg("修改成功", {icon: 6});
                            $("#hide").show();
                            $("#hide1").hide();
                            $("#hide2").hide();
                            $("#phone").attr("readOnly","true");
                            $("#phone").css("background","#f1f3f3");
                        } else {
                            layer.msg("修改失败", {icon: 5});
                        }
                    },
                    error:function(){
                        showloading(false)
                    }

                });
            });
        });
    });


</script>

</html>
